import React from 'react'
import { Routes, Route, Link, NavLink } from 'react-router-dom'
import Home from './pages/Home'
import Login from './pages/Login'
import Test from './pages/Test'
// 需求: Home和Login是两个一级路由组件, Test是Home里面的二级路由组件.Test渲染在Home组件中hr下面
export default function App() {
  return (
    <div>
      {/* NavLink和Link组件的作用一致,但是会自动根据当前路径给a标签添加active类名.从而快速实现高亮 */}

      <NavLink to="/home">home</NavLink>
      <NavLink to="/login">login</NavLink>

      <hr />
      <Routes>
        <Route path="home" element={<Home></Home>}>
          <Route path="test" element={<Test></Test>}></Route>
        </Route>
        <Route path="login">
          <Route path=":id" element={<Login></Login>}></Route>
          <Route path="" element={<Login></Login>}></Route>
        </Route>
      </Routes>
    </div>
  )
}
